<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script src="./layui/layui.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
	</head>

	<body>
		
		
			<div class="layui-row">
				<div class="layui-col-lg2">
					<!--树形结构显示模块开始-->
					<div id="demotree" class="demo-tree-more" style="margin-top: 150px;"></div>
				</div>
				<div class="layui-col-lg10" >
					<div class="layui-form-item" style="margin-top: 20px" onsubmit="false">
						<div class="layui-form-item">
							<label class="layui-form-label">模块名</label>
							<div class="layui-input-inline">
								<input class="layui-input" name="name" id="name" lay-verify="required" />
							</div>
							<button class="layui-btn" id="serach" data-type="reload">搜索</button>
							<button class="layui-btn" id="chongzhi" data-type="reload"><i class="layui-icon layui-icon-refresh-1"></i></button>
						</div>
					</div>
					<table id="demo" lay-filter="test"></table>
					<script type="text/html" id="barDemo">
						<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
					</script>
					<script type="text/html" id="toolbarDemo">
						<div class="layui-btn-container">
							<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
						</div>
					</script>
					<script>
						layui.use(['table', 'form', 'tree'], function() {
							var table = layui.table;
							var $ = layui.jquery; //引入jquery
							var form = layui.form;
							var tree = layui.tree;
							var nodes = []; //父节点
							var datas = [];
							var datass = [];
							var chils = []; //子节点数据
							
							//解决跨域
							$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
								options.xhrFields = {
									withCredentials: true
								}
							})
							//第一个实例
							table.render({
								elem: '#demo',
								toolbar: '#toolbarDemo' //开启头部栏工具
									,
								url: globalData.server + './Modules/getModules' //数据接口
									,
								page: true //开启分页
									,
								method: 'POST',
								id: 'idTest',
								cols: [
									[ //表头
										{
											field: 'id',
											title: 'ID',
											
											sort: true,
											fixed: 'left',
											align: 'center'
										}, {
											field: 'name',
											title: '模块名',
											
											align: 'center'
										}, {
											field: 'parentId',
											title: '父级ID',
											
											align: 'center'
										}, {
											field: 'path',
											title: '地址',
										
											align: 'center'
										}/*, {
											field: 'weight',
											title: '权重',
											width: 120,
											align: 'center'
										}*/, {
											field: 'right',
											title: '操作',
											toolbar: '#barDemo',
											align: 'center'
											
										}
									]
								]
							});
							$('#serach').on('click', function() {
								var name = $("#name").val(); //上面搜索框的id
								table.reload('idTest', {
									where: { //请求参数
										'name': name,
									}
								});
							});
							/* 重置文本框 */
							$('#chongzhi').on('click', function() {
							$(":input").val('');
								table.reload('idTest', {
									where: { //请求参数
										'name': name,
									}
								});
							});
					
							//监听头部工具栏
							table.on('toolbar(test)', function(obj) {
								switch(obj.event) {
									case 'add':
										layer.open({ //打开一个页面
											type: 2, //在当前页面打开一个页面
											area: ['500px', '550px'], //页面宽高
											content: 'modules-add.html', //页面地址
											title: '添加模块', //打开页面标题
											end: function() {
												window.location.reload(); //当窗口关闭后刷新页面
											}
										});
										break;
								};
							});
							//监听工具条
							table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
								var data = obj.data; //获得当前行数据
								if(obj.event === 'del') { //删除
									layer.confirm('真的删除行么', function(index) {
										var url = globalData.server + './Modules/del'; //请求地址
										$.post(url, {
											id: obj.data.id,
										}, function(data) {
											if(data.count > 0) {
												console.log('删除成功');
												window.location.reload(); //刷新页面
											} else {
												layer.msg(data.msg, {
													icon: 6
												});
											}
										}, "json");
									});
								} else if(obj.event === 'edit') { //编辑
									layer.open({ //打开一个页面
										type: 2, //在当前页面之上以弹框的形式，展示编辑页面
										area: ['500px', '550px'], //页面宽高
										content: 'modules-edit.html', //页面所在位置
										title: '您正在编辑模块编号为' + obj.data.id + '的信息',
										success: function(layero, index) {
											var body = layer.getChildFrame('body', index);
											body.contents().find("#id").val(obj.data.id);
											body.contents().find("#name").val(obj.data.name);
											body.contents().find("#path").val(obj.data.path);
											body.contents().find("#weight").val(obj.data.weight);
										},
										end: function() {
											window.location.reload(); //当窗口关闭后刷新页面
										}
									});
								}
							});
							//			树形结构开始
							$.ajax({
								url: globalData.server + "./Modules/getAllModulessAll", //拿到所有模块
								type: "post",
								datatype: "json",
								async: false,
								success: function(data) {
									tree.render({ //tree.render() 方法指定一个元素，便可快速创建一个 tree 实例
										elem: '#demotree', //传入元素选择器
										showCheckbox: true, //是否显示复选框
										data: data, //获取节点数据
										id: 'id', //定义索引 
									});
								},
							});
					
							//				$("#formDemo").click(function() { //提交
							//					var checkData = tree.getChecked('id'); //获得选中的节点
							//					if(checkData.length == 0) { //判断复选框是否被选中
							//						layer.msg("请至少选择一个节点", {
							//							icon: 6
							//						});
							//						return false;
							//					} else {
							//						var ids = [];
							//						var chil = [];
							//						for(var key in checkData) { //循环父节点
							//							var node = checkData[key];
							//							ids.push(node.id); //在父节点末尾添加一个或多个元素
							//							chil = node.children; //获取子节点数组
							//							for(var key in chil) { //循环子节点
							//								var children = chil[key];
							//								ids.push(children.id); //在子节点末尾添加一个或多个元素
							//							}
							//						}
							//						$.ajax({
							//							url: globalData.server + './ModulesRoles/addModuleByIdRoles', //角色添加模块
							//							type: "POST",
							//							datatype: "json",
							//							async: false,
							//							data: {
							//								"roleId": userid,
							//								'ids': JSON.stringify(ids),
							//							}, //传数据给后台
							//							success: function(result) {
							//								if(result.success) {
							//									layer.msg(result.msg, {
							//										icon: 6
							//									});
							//									var index = parent.layer.getFrameIndex(window.name);
							//									parent.layer.close(index); //关闭当前页
							//								} else {
							//									layer.msg(result.msg, {
							//										icon: 6
							//									});
							//								}
							//							}
							//						});
							//					}
							//				});
					
							//			树形结构结束
					
						});
					</script>
				</div>
		
			
		</div>
		
		<!--<div class="layui-form-item">
			<div class="layui-input-block" style="margin-left:0;text-align:center;">
				<button class="layui-btn layui-btn-blue" id="formDemo">确认选择</button>
			</div>
		</div>-->
		<!--树形结构显示模块结束-->
		
	</body>

</html>